<template>
	<div class="body">
		<div class="loginbox">
			<div class="flex con">
				<!-- <div class="left-box">
					<el-image :src="'/images/login_bg.png'" class="left-box-img" :fit="'cover'"></el-image>
					<div class="text-content">
						<h3 class="e-m-0">区块链电子劳动合同</h3>
						<h3>签约平台</h3>
						<div class="s_text e-p-t-10">提升合同签署效率</div>
						<div class="s_text">降低虚假合同签署、萝卜章等风险</div>
						<div class="s_text">提供在线司法出证，服务电子签约最后一公里</div>
					</div>
				</div> -->
				<div class="right-box">
					<!-- 这是一进来的登录 -->
					<div class="logon" v-if="seeQR">
						<!-- <div class="QR">
							<div class="QR-left">
								微信扫码登录
							</div>
							<div class="QR-right" @click="seeQR=false">
								<i class="iconfont iconerweima"></i>
							</div>
						</div> -->
						<div class="title e-p-b-10">
							<div class="logo">
								<!-- <el-image :src="fileURL + websetting.sitelogoimg" :fit="'contain'"
									style="width: 150px;height: 150px;">
								</el-image> -->
								<el-image src="/images/logo.png" :fit="'contain'"
									style="width: 150px;height: 150px;">
								</el-image>
							</div>
							<!-- <h1 class="e-m-b-15">欢迎使用{{ websetting.name }}</h1> -->
						</div>
						<ul>
							<li @click="changeLogontype(true, '/Admin/Account/SMSLogin')"
								:class="{ active: logontype == true }">
								验证码登录</li>
							<li @click="changeLogontype(false, '/Admin/account/login')"
								:class="{ active: logontype == false }">密码登录
							</li>
						</ul>
						<div class="inputtext">
							<el-form :label-position="labelPosition" label-width="80px" ref="form" :model="form"
								:rules="rules" @submit.native.prevent>
								<el-form-item prop="account">
									<el-input v-model="form.account" :placeholder="logontype ? '请输入手机号' : '请输入手机号'"
										prefix-icon="el-icon-user-solid"></el-input>
								</el-form-item>
								<!-- 这个是第一部分 -->
								<el-form-item prop="password" v-if="logontype == false">
									<el-input placeholder="请输入密码" v-model="form.password" show-password
										prefix-icon="el-icon-s-grid">
									</el-input>
								</el-form-item>
								<!-- 这个是第二部分 -->
								<el-form-item prop="accountcaptcha" v-else>
									<el-input v-model="form.accountcaptcha" placeholder="请输入您接收到的验证码"
										prefix-icon="el-icon-s-grid">
										<template slot="append">
											<el-button type="primary" @click="getTelCode" :disabled="getCodeBtn">
												{{ getCodeText }}</el-button>
										</template>
									</el-input>
								</el-form-item>

								<el-form-item prop="captcha" v-if="codeImg != '' && logontype == false">
									<el-input v-model="form.captcha" prefix-icon="el-icon-unlock" placeholder="请输入验证码"
										class="form-input">
										<template slot="append">
											<img class="codeImg" :src="codeImg" ref="codeImg" @click="getCode">
										</template>
									</el-input>
								</el-form-item>
								<el-form-item>
									<div class="bottomtips">
										<span>登录即表示已阅读并同意 <a href="javascript:;"
												@click="goiframe('/home/privacyPolicy/', '用户隐私政策协议')">《用户隐私政策协议》</a>及<a
												href="javascript:;"
												@click="goiframe('/home/regAgreement/', '用户注册协议')">《用户注册协议》</a></span>
									</div>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitdata('form')" native-type="submit"
										:loading="loading" class="login-btn">登录系统</el-button>
									<!-- <el-button type="primary" @click="textlogin" native-type="submit"
										:loading="loading" class="login-btn">登录系统</el-button> -->
								</el-form-item>
							</el-form>
						</div>
					</div>

					<!-- 扫码登录 -->
					<div class="seeQR" v-else>
						<div class="QR">
							<div class="QR-left">
								账号密码登录
							</div>
							<div class="QR-right" @click="seeQR = true">
								<i class="iconfont icondiannao"></i>
							</div>
						</div>
						<div class="head">
							<h1>扫码登录</h1>
						</div>
						<div class="header text-center">请扫码关注公众号完成登录</div>
						<div class="middle">
							<div class="qrCodeid">

							</div>
							<div class="qrimg">

							</div>
						</div>
						<div class="footer">
							<span>登录即表示已阅读并同意 <a>《使用协议》</a>及<a>《隐私协议》</a></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer e-font-14 text-center">
			<a href="https://beian.miit.gov.cn" class="footer"><span>{{ websetting.copyright }}</span></a>
		</div>
		<div class="dialogPage">
			<el-dialog :title="iframe.title" :visible.sync="dialogVisible" width="1200px">
				<iframe :src="iframe.link" width="1100px" height="600px" style="border: 0;" ref="iframe"
					class="dialog-text"></iframe>
			</el-dialog>
		</div>
		<div class="dialogCode">
			<el-dialog title="验证" :visible.sync="dialogVisible1" width="400px">
				<div class="main" @click="getGuiCode()" style="cursor: pointer;">
					<el-image style="width: 100%; height: auto" :src="countCodeImg" fit="fill" class="images"
						ref="countCodeImg">
					</el-image>
				</div>
				<div class="inputCode">
					<el-input v-model="code" placeholder="请输入图片中的结果" class="input"></el-input>
					<el-button type="primary" @click="decideCode" class="button e-m-l-15">确 定</el-button>
				</div>
				<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="decideCode">确 定</el-button>
				</span> -->
			</el-dialog>
		</div>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close"
			:pintuImg="pintuImg" :pintukuai="pintukuai" :ynumber="ynumber" :err="verifyErr" ref="verifyElement">
		</slider-verify>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex';

export default {
	data() {
		return {
			countCodeImg: '', //验证码图片,
			code: "", //发送短信验证码
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			dialogVisible1: false,
			labelPosition: 'top',
			seeQR: true,
			logontype: false, // 登录类型判断，true为验证码登录
			input: '',
			dialogVisible: false,
			form: {
				account: '',
				password: '',
				captcha: '',
				CaptchaGuid: '',
				accountcaptcha: ''
			},
			rules: {
				account: [{
					required: true,
					message: '请输入账号',
					trigger: 'blur'
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}],
				// captcha: [{
				// 	required: true,
				// 	message: '请输入验证码',
				// 	trigger: 'blur'
				// }],
				// accountcaptcha: [{
				// 	required: true,
				// 	message: '请输入短信验证码',
				// 	trigger: 'blur'
				// }]
			},
			codeImg: '',
			loading: false,
			iframe: {
				link: '',
				title: ''
			},
			getCodeBtn: false,
			getCodeText: '点击获取验证码',
			apiLink: '/Admin/account/login',
			// 滑块验证参数
			sliderVerifyFLag: false,
			pintuImg: '',
			pintukuai: '',
			ynumber: 0,
			verifyErr: false
		};
	},
	computed: {
		...mapState({
			webSetting: state => state.webSetting
		})
	},
	mounted() {
		this.err = this.$router.history.current.query.status;
		if (this.err == 2) {
			this.$message({
				type: 'error',
				message: '登录异常或过期，请重新登录',
				duration: 5000
			})
		}

		localStorage.clear()
	},
	methods: {
		textlogin() {
			this.$message({
				type: 'success',
				message: '登陆成功',
				duration: 5000
			})
			this.$router.push({
				path:'/'
			})
		},
		// 获取滑块验证信息
		getSlideCaptch() {
			this.$axios.get('/SlideCaptcha/GetSlideCaptcha').then((res) => {
				this.pintuImg = res.src1
				this.pintukuai = res.src2
				this.ynumber = res.ynumber
				this.form.guid = res.guidid
				this.sliderVerifyFLag = true
			}).catch((err) => {
				this.loading = false
			})
		},
		// 滑块验证结果回调函数
		verifyResult(oldx) {
			this.form.countResult = Math.round(oldx);
			// 登录类型判断，true为验证码登录
			if (this.logontype) {
				//验证码登录
				this.getLoginCaptcha().then(()=>{
					this.$store.dispatch('signalrConnection')
				})
			} else {
				this.decideCode().then(()=>{
					this.$store.dispatch('signalrConnection')
				})
			}
		},
		//验证码获取
		getLoginCaptcha() {
			return this.$axios.get('/Admin/Account/SendLoginCaptcha?mobile=' + this.form.account + '&guid=' + this.form.guid + '&countresult=' + this.form.countResult).then((res) => {
				if (res) {
					// 验证弹窗
					this.sliderVerifyFLag = false
					// 短信验证码
					this.code = ""
					this.$message.success(res.msg);
					let time = 60
					let timer = setInterval(() => {
						this.getCodeBtn = true
						--time
						this.getCodeText = time + '秒后重新获取'
						if (time == 0) {
							this.getCodeBtn = true
							this.getCodeText = "点击获取验证码"
							clearInterval(timer)
						}
					}, 1000)
				} else {
					this.getSlideCaptch()
				}

			}).catch(res => {
				this.$refs.verifyElement.refreshVerify(); //用ref直接操纵这个组件里面的这个方法
				this.code = ""
			})
		},
		// 关闭滑块验证弹窗
		close(state) {
			this.sliderVerifyFLag = state;
			this.loading = false;
		},
		// 刷新滑块验证
		refresh() {
			this.getSlideCaptch();
		},
		decideCode() {
			this.loading = true
			localStorage.setItem("UserType",5)
			let params = {
				...this.form,
				mobile: this.form.account
			}
			return this.$axios.post(this.apiLink, params).then((res) => {
				console.log(res)
				this.loading = false
				let data = res
				let lifeData = {
					authorization: data.token.token.token,
					userdetail: data.token.userdetail
				}
				this.$store.dispatch('setInitData', lifeData).then(() => {
					localStorage.setItem('activeIndex', "t0")
					localStorage.setItem('useTemplate',2)
					this.$message({
						type: 'success',
						message: '登陆成功',
						duration: 5000
					})
					this.$router.push({
						path:'//Notice/list'
					})
				})
			}).catch((res) => {
				this.sliderVerifyFLag = false
				this.loading = false
				// // 刷新
				// this.getSlideCaptch();
				// // this.form.countResult = "";
				// this.$refs.verifyElement.refreshVerify(); //用ref直接操纵这个组件里面的这个方法
				// // console.log(11111111)
				// let timer = setInterval(() => {
				// 	this.loading = false;
				// 	clearInterval(timer)
				// }, 1000)
			})
		},
		getGuiCode() {
			this.$axios.get('/Captch/GetCountGuid').then((res) => {
				this.form.guid = res.guid;
				if (this.countCodeImg == '') {
					this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid;
				} else {
					// this.$refs.countCodeImg.src = this.baseURL + '/Captch/CountCode?guid' + res.guid;
					this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid
					// console.log(this.baseURL + '/Captch/CountCode?guid' + res.guid)
				}
			}).catch((err) => {
				this.loading = false
			})
		},
		goBack() {
			this.$router.go(-1)
		},
		changeLogontype(status, link) {
			this.logontype = status
			this.apiLink = link
			this.$refs.form.clearValidate()
		},

		// onSubmit(formName) {
		// 	var that = this;
		// 	that.$refs[formName].validate((valid) => {
		// 		if (valid) {
		// 			if (!that.logontype && (that.form.password || '') == '') {
		// 				that.$message({
		// 					type: 'error',
		// 					message: '请输入密码',
		// 					duration: 5000
		// 				})
		// 				return;
		// 			}
		// 			if (that.codeImg == "" && that.logontype == false) {
		// 				that.$axios.get('Account/GetErrorCount?Account=' + that.form.account +
		// 					'&isAdmin=false').then((res) => {
		// 						if (res.status == 0) {
		// 							if (res == 0) {
		// 								that.submitdata();
		// 							} else {
		// 								that.getCode();
		// 							}
		// 						}
		// 					}).catch((err) => {
		// 						this.loading = false
		// 					})
		// 			} else {
		// 				that.submitdata();
		// 			}
		// 		} else {
		// 			return false;
		// 		}
		// 	});
		// },
		// 登录
		submitdata(formName) { //提交数据
			this.loading = true;
			var that = this;
			that.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.logontype) {
						// 登录类型判断，true为验证码登录
						this.decideCode()
					} else {
						this.getSlideCaptch();
					}
				} else {
					if (that.form.password == '') {
						that.$message({
							type: 'error',
							message: '请输入密码',
							duration: 5000
						})
					} else if (that.form.account == '') {
						that.$message({
							type: 'error',
							message: '请输入手机号',
							duration: 5000
						})
					}
					this.loading = false;
				}
			})
		},
		getTelCode() {
			if (this.form.account == '') {
				this.$message.error('请输入手机号');
				return
			}
			this.getSlideCaptch()
		},
		goiframe(url, title) {
			this.iframe.link = url;
			this.iframe.title = title;
			this.dialogVisible = true
		}
	}
}
</script>
<style scoped>
.dialogPage>>>.el-dialog__body {
	padding: 0px;
}

.dialogPage>>>.el-dialog__header {
	padding: 20px 20px 0px;
}
</style>
<style lang="scss" scoped>
.body {
	background-color: var(--light)
}

.dialogCode {
	.main {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--grey);
	}

	.inputCode {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}
}

.dialog-text {
	padding-left: 48px;
	padding-bottom: 30px;
}

.copyright {
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 16px;
	color: var(--grey);
	padding: 15px 0;
}

.loginbox {
	width: 1200px;
	height: calc(100vh - 40px);
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	// background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;

	.con {
		box-shadow: 0 2px 12px 0 #0000002e;
		// height: 584px;

		.left-box {
			background-color: #f3faff;
			position: relative;

			.text-content {
				position: absolute;
				top: 0;
				width: 100%;
				padding: 93px 50px;
				box-sizing: border-box;

				h3 {
					font-size: 28px;
					margin-top: 0;
					margin-bottom: 15px;
					font-weight: inherit;
				}

				.s_text {
					color: var(--gray);
					line-height: 24px;
				}
			}
		}

		.left-box-img {
			transform: scale(0.85);
			width: 470px;
			height: 100%;
		}

		.right-box {
			overflow: hidden;

			.logon {
				padding: 0px 44px 24px;
				height: 100%;
				width: 470px;
			}
		}
	}

	// 这个是进来的登录页面的样式
	.logon {

		// .img{
		//   width: 70px;
		//   height: 70px;
		//   margin: 0 auto;
		//   background-image: url("@/static/images/logo.png");
		//   background-position: center;
		//   background-size: cover;
		// }
		.logo {
			// width: 70px;
			// height: 70px;
			// margin: 0 auto;
			text-align: center;
			color: var(--red);
			font-size: 70px;
			line-height: 70px;
			padding-top: 24px;
			// background-image: url("@/static/images/logo.png");
			// background-position: center;
			// background-size: cover;
		}

		.title {

			h1 {
				width: 100%;
				text-align: center;
				font-weight: 700;
				font-size: 24px;
				color: #283548;
			}

			// .img{
			//  width: 48px;
			//   height: 48px;
			//   background-color: red;

			//   background-position: center;
			//   background-size: cover;
			// }
		}

		width: 500px;
		background-color: white;
		margin: 0 auto;
		padding: 60px 44px 24px;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;

		.QR {
			width: 170px;
			height: 71px;
			position: absolute;
			top: 0px;
			right: 0px;
			;
			display: flex;
			align-items: center;

			.QR-left {
				height: 40px;
				width: 100px;
				background-color: var(--blue);
				text-align: center;
				line-height: 40px;
				color: white;
				border-radius: 5px;
				font-size: 14px;
				position: relative;

				&:hover {
					opacity: 0.8;
				}

				&::after {
					content: "";
					height: 0px;
					width: 0px;
					position: absolute;
					top: 4px;
					right: -10px;
					border-top: 0px solid transparent;
					border-right: 20px solid var(--blue);
					border-left: 20px solid transparent;
					border-bottom: 20px solid transparent;
					transform: rotateZ(45deg);
					z-index: 99;
				}
			}

			.QR-right {
				height: 100%;
				width: 70px;
				line-height: 60px;
				font-size: 50px;
				text-indent: 7px;
				text-align: center;
				position: relative;
				cursor: pointer;
				background: #2a91ff;
				color: #fff;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					border: 36px solid #000;
					border-top-color: transparent;
					border-right-color: transparent;
					border-left-color: #fff;
					border-bottom-color: #fff;
				}
			}
		}

		h1 {
			font-size: 22px;

			// padding-right: 60px;
		}

		ul {
			display: flex;

			li {
				height: 54px;
				width: 50%;
				line-height: 54px;
				text-align: center;
				border-bottom: 2px solid var(--light);

				&:hover {
					cursor: pointer;
				}

				&.active1 {
					color: var(--main);
					border-bottom: 2px solid var(--main);
				}

				&.active {
					color: var(--main);
					border-bottom: 2px solid var(--main);
				}
			}
		}

		.inputtext {
			margin-top: 25px;
			position: relative;

			// 这个是密码登录的小眼睛
			.change {
				width: 460px;
				height: 133px;

				.footer {
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: var(--gray);

					a {
						font-size: 12px;

						&:hover {
							cursor: pointer;
						}
					}
				}
			}

			// 这个是短信登录的获取验证码
			.change1 {
				width: 460px;
				height: 133px;

				.footer {
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: var(--gray);

					a {
						font-size: 12px;

						&:hover {
							cursor: pointer;
						}
					}
				}

				span {
					font-size: 12px;
					color: var(--gray);
				}

				#eyes {
					position: absolute;
					right: 15px;
					top: 175px;
					color: var(--blue);

					&:hover {
						cursor: pointer;
					}
				}
			}

			.button {
				width: 460px;
				margin: 0 auto;
				margin-top: 35px;
			}
		}
	}

	// 这是第二部分的扫码样式
	.seeQR {
		width: 500px;
		height: 620px;
		background-color: white;
		margin: 0 auto;
		padding: 20px 20px 24px;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;

		.QR {
			width: 170px;
			height: 71px;
			position: absolute;
			top: 0px;
			right: 0px;
			;
			display: flex;
			align-items: center;

			.QR-left {
				height: 40px;
				width: 100px;
				background-color: var(--blue);
				text-align: center;
				line-height: 40px;
				color: white;
				border-radius: 5px;
				font-size: 14px;
				position: relative;

				&:hover {
					opacity: 0.8;
				}

				&::after {
					content: "";
					height: 0px;
					width: 0px;
					position: absolute;
					top: 4px;
					right: -10px;
					border-top: 0px solid transparent;
					border-right: 20px solid var(--blue);
					border-left: 20px solid transparent;
					border-bottom: 20px solid transparent;
					transform: rotateZ(45deg);
					z-index: 99;
				}
			}

			.QR-right {
				height: 100%;
				width: 70px;
				line-height: 60px;
				font-size: 50px;
				text-indent: 7px;
				text-align: center;
				position: relative;
				cursor: pointer;
				background: #2a91ff;
				color: #fff;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					border: 36px solid #000;
					border-top-color: transparent;
					border-right-color: transparent;
					border-left-color: #fff;
					border-bottom-color: #fff;
				}
			}
		}

		.head {
			h1 {
				padding: 0.625rem;
				text-align: center;
				font-size: 25px;
			}
		}

		.header {
			justify-content: center;
		}

		.middle {
			height: 225px;
			width: 90%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 auto;
			margin-top: 20px;

			.qrCodeid {
				width: 198px;
				height: 198px;
				background-color: skyblue;
			}

			.qrimg {
				width: 170px;
				height: 224px;
				// background-image: url("@/static/images/scan.png");
				background-position: center;
				background-size: cover;
			}
		}

		.footer {
			font-size: 12px;
			text-align: center;
			margin-top: 10px;
			color: var(--gray);
		}

	}

	.bottomtips {
		display: flex;
		font-size: 12px;
		justify-content: space-between;
	}

	.bottom-b {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;

		a {
			flex: 1;
			text-align: center;
			color: var(--grey);
			border-right: 1px solid var(--grey);
			height: 15px;
			line-height: 15px;
			font-size: 12px;

			&:nth-child(2) {
				border: 0px;
			}
		}
	}

	.login-btn {
		display: block;
		width: 100%;
	}
}
</style>
